<template>
<div class="container"  v-if="isDetail">
    <!-- 团课课程表  按钮部分 -->
        <div class="handle-box">
            <el-row>
                <el-col :span="21">
                     <el-button-group class="ml-4">
                    <el-button type="success" @click="addCourseSchedule">新增排课</el-button>
                    <el-button type="info" @click="copyCourseSchedule">复制排课</el-button>
                </el-button-group>
                </el-col>
                <el-col :span="2">
                     <el-button type="warning"  @click="exportReservationData">批量导出预约数据</el-button>
                </el-col>
            </el-row>
        </div>
    <!-- <el-divider></el-divider> -->
    <!-- 团课课程表 日历部分 -->
    <div style="margin-top: 30px;">
        <MyCalender v-model:isDetail="isDetail" v-model:courseId="courseId"/>
    </div>

    <!-- 新增排课的抽屉 -->
      <el-drawer v-model="addScheduleDrawer" title="新增排课" direction="rtl" size="50%">
       <template #header>
            <h2>新增排课</h2>
        </template>
        <div class="demo-drawer__content"  >
          <el-form :model="form" style="margin-left: 20px; max-width: 600px;" label-width="auto" >
            <el-form-item label="课程" >
               <el-select v-model="form.courseId"
                         placeholder="-请选择课程-"
                         filterable
                         remote
                         reserve-keyword
                         :remote-method="remoteMethod"
                         :loading="loading"
                     
                         >
                             <template #header>
                                 <el-row >
                                     <el-col :span="4"><h3>id({{ remoteClassData.length }})</h3></el-col>
                                     <el-col :span="10"><h3>课程名称</h3></el-col>
                                     <el-col :span="10"><h3>可容纳人数</h3></el-col>
                                 </el-row>
                             </template>
                            <el-option
                             v-for="item in remoteClassData"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"
                             >
                             <el-row>
                                 <el-col :span="4"><span>{{ item.id }}</span></el-col>
                                 <el-col :span="10"><span>{{ item.name }}</span></el-col>
                                 <el-col :span="10"><span >{{ item.contains }}</span></el-col>
                             </el-row>
                         
                             </el-option>

                              <template #loading>
                                 <svg class="circular" viewBox="0 0 50 50">
                                     <circle class="path" cx="25" cy="25" r="20" fill="none" />
                                 </svg>
                             </template>
                           </el-select>
            </el-form-item>
            <el-form-item label="老师" >
               <el-select v-model="form.teacherId"
                         placeholder="-请选择老师-"
                         filterable
                         remote
                         reserve-keyword
                         :remote-method="remoteMethod2"
                         :loading="loading2"
                        
                         >
                             <template #header>
                                 <el-row >
                                     <el-col :span="3"><h3>id({{ remoteTeacherData.length }})</h3></el-col>
                                     <el-col :span="7"><h3>老师名称</h3></el-col>
                                     <el-col :span="7"><h3>性别</h3></el-col>
                                     <el-col :span="7"><h3>擅长科目</h3></el-col>
                                 </el-row>
                             </template>
                            <el-option
                             v-for="item in remoteTeacherData"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"
                             >
                             <el-row>
                                 <el-col :span="3"><span>{{ item.id }}</span></el-col>
                                 <el-col :span="7"><span>{{ item.name }}</span></el-col>
                                 <el-col :span="7"><span >{{ item.gender }}</span></el-col>
                                 <el-col :span="7"><span >{{ item.goodSubject }}</span></el-col>
                             </el-row>
                             </el-option>
                              <template #loading>
                                 <svg class="circular" viewBox="0 0 50 50">
                                     <circle class="path" cx="25" cy="25" r="20" fill="none" />
                                 </svg>
                             </template>
                           </el-select>
            </el-form-item>
             <el-form-item label="日期" >
               <el-date-picker
                  v-model="form.startDate"
                  type="date"
                  placeholder="yyyy-mm-dd"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />

             </el-form-item>
             <el-form-item label="上课时间" >
                  <el-time-select
                    v-model="form.classTime"
                    start="00:00"
                    step="00:30"
                    end="23:59"
                    placeholder="Select time"
                    format="hh:mm A"
                  />
             </el-form-item>
             <el-form-item>
              <h2>高级设置(对预约会员的条件限制)</h2>
             </el-form-item>
             <el-form-item label="学生性别">
              <el-input v-model="form.limitSex" disabled  />
             </el-form-item>
           
             <el-form-item label="学生年龄">
              <el-input v-model="form.limitAge"  disabled />
             </el-form-item>
          </el-form>
          <div class="demo-drawer__footer" style="margin-left: 20px;">
            <el-button @click="addScheduleDrawer=false">关闭</el-button>
            <el-button type="primary"  @click="saveSchedule">确定
            </el-button>
          </div>
        </div>
      </el-drawer>

       <!-- 复制排课的抽屉 -->
        <el-drawer v-model="copyScheduleDrawer" title="新增排课" direction="rtl" size="50%">
         <template #header>
              <h2>新增排课</h2>
          </template>
          <div class="demo-drawer__content"  >
            <el-form :model="copyForm" style="margin-left: 20px; max-width: 600px;" label-width="auto" >
               <el-form-item label="将" >
                 <el-date-picker
                    v-model="copyForm.startDate"
                    type="date"
                    placeholder="yyyy-mm-dd"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />

               </el-form-item>
               <el-form-item label="复制到" >
                 <el-date-picker
                    v-model="copyForm.endDate"
                    type="date"
                    placeholder="yyyy-mm-dd"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                  />
               </el-form-item>
            </el-form>
            <div class="demo-drawer__footer" style="margin-left: 20px;">
              <el-button @click="copyScheduleDrawer=false">关闭</el-button>
              <el-button type="primary"  @click="copyConfirm">确定</el-button>
            </div>
          </div>
        </el-drawer>
    <!-- 批量导出的抽屉 -->
     <el-drawer v-model="batchExportDrawer" title="批量导出" direction="rtl" size="50%">
           <template #header>
                <h2>批量导出</h2>
            </template>
            <div class="demo-drawer__content"  >
              <el-form :model="copyForm" style="margin-left: 20px; max-width: 600px;" label-width="auto" >
                 <el-form-item >
                     <el-date-picker
                      v-model="batchDate"
                      type="daterange"
                      range-separator="到"
                      start-placeholder="yyyy-mm-dd"
                      end-placeholder="yyyy-mm-dd"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />

                 </el-form-item>
              </el-form>
              <div class="demo-drawer__footer" style="margin-left: 20px;">
                <el-button @click="batchExportDrawer=false">关闭</el-button>
                <el-button type="primary"  @click="exportConfirm">确定</el-button>
              </div>
            </div>
          </el-drawer>
</div>
<div class="container" v-else>
  <CourseDetail :courseId="courseId"   v-model:isDetail="isDetail"></CourseDetail>
</div>

</template>

<script setup>
import { ref,reactive,h } from 'vue'
import MyCalender from './ScheduleSub/MyCalendar.vue'
import {getCourseList,getTeachers} from '@/api/course'
import CourseDetail from '@/views/Course/ScheduleSub/CourseDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const isDetail= ref(true)
//课程id 
const courseId=ref()
//新增排课
const addScheduleDrawer = ref(false)
//表单中需要提交的数据
const form = reactive({
    courseId:'',//课程
    teacherId:'',//老师
    startDate:'2024-07-11',//日期
    classTime:'09:30 AM',//上课时间
    limitSex:'男',//学生性别  
    limitAge:'不限制'//学生年龄 
})
const addCourseSchedule = () => {
    addScheduleDrawer.value = true
}
//保存新增排课

const saveSchedule =()=>{
 
   ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定要新增该课程吗?'),
      // h('span', { style: 'color: teal;text-align:center' }, '注意:一旦扣费成功,将无法取消'),
    ]),
    confirmButtonText: '添加',
    cancelButtonText: 'Cancel',
    center: true,
    type: 'warning',
  }).then((action) => {
    //todo 调用后台修改数据
   

    ElMessage({
      type: 'success',
      message: `添加成功`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消添加',
    })
  })

}


//复制排课       
const copyScheduleDrawer = ref(false)
const copyForm = reactive({
  startDate:'',
  endDate:''
})
const copyCourseSchedule = () => {
   copyScheduleDrawer.value=true
}

//确定copy
const copyConfirm=()=>{
  //todo 调用后端接口确定拷贝课程   传递的数据就是copyForm
   ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定复制这一天的课程吗?'),
    
    ]),
    confirmButtonText: '确认',
    cancelButtonText: 'Cancel',
    center: true,
    type: 'warning',
  }).then((action) => {
    //todo 调用后台修改数据


    ElMessage({
      type: 'success',
      message: `确认`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消',
    })
  })
}

//批量导出预约数据的按钮
const batchDate = ref()
const batchExportDrawer = ref(false)
const exportReservationData =()=>{
  batchExportDrawer.value=true
}
//关闭导出
const cancelExport = () => {

}
//确定导出
const exportConfirm = () => {
  //todo 调用后端接口确定拷贝课程   传递的数据就是copyForm
   ElMessageBox.confirm('', '提示', {
    message: h('p', null, [
      h('h2', { style: 'margin-bottom:10px;text-align:center' }, '你确定要导出预约数据吗?'),
    ]),
    confirmButtonText: '确定',
    cancelButtonText: 'Cancel',
    center: true,
    type: 'warning',
  }).then((action) => {
    //todo 调用后台修改数据


    ElMessage({
      type: 'success',
      message: `导出成功`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消',
    })
  })
}

//课程查询
const loading = ref(false)
const remoteClassData = ref([])
const remoteMethod = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    //todo 调用接口查询课程 
    getCourseList().then(res => {
      console.log('课程数据：', res)
      remoteClassData.value = res.data
      console.log('remoteClassData：', remoteClassData.value)
    })
  }, 2000);
}

//老师查询
const loading2 = ref(false)
const remoteTeacherData = ref([])
const remoteMethod2 = () => {
  loading2.value = true
  setTimeout(() => {
    loading2.value = false
    //todo 调用接口查询课程 
    getTeachers().then(res => {
      console.log('课程数据：', res)
      remoteTeacherData.value = res.data
      console.log('remoteTeacherData', remoteTeacherData.value)
    })
  }, 2000);
}
</script >
<style lang="less" scoped>
.w50{
   width: 55%;
}
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
</style>